<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Fixture WorldCup2014</title>

  <!-- jQuery -->
  <script src='js/libs/jquery-2.0.2.min.js'></script>

  <script src='js/libs/underscore-1.4.4.min.js'></script>
  <script src='js/libs/require-2.1.6.js'></script>

  <style>

    .football-widget a
    {
      color: black;
      text-decoration: none;
    }

    .football-widget {
       border: 1px solid green;
       padding: 4px;
       margin: 10px;
    }

    .football-widget .rounds {
      margin-bottom: 10px;
    }

  </style>

  <script>
    require.config( {
      paths: {
        'text': 'libs/require-text-2.0.7'   // require.js text plugin
      },
      baseUrl: 'js'
    });

    require(['football/widget', 'football/widget-today' , 'football/plugin'], function(Widget, WidgetToday) {

      $(document).ready( function() {

        $( '#confed' ).football( { event: 'world.2014' } );
        // option 3) widget with no event => show scheduled rounds for today (for all events)
        WidgetToday.create( '#rounds' );
      });

    }); // fn require
	
  </script>


</head>
<body>


    <h1>Matchday Example / football.db JSON(P) API</h1>

    <div id='confed'></div>
	<p>Any rounds scheduled today?</p>
	<div id='rounds'></div>

	<div id='gtable'></div>
	
	
	<script type="text/javascript"
  src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['sankey']}]}">
</script>

<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);

   function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Weight');
    data.addRows([
       [ '1A', 'C1', 3 ],
       [ '2B', 'C1', 3 ],
       [ '1C', 'C2', 3 ],
       [ '2D', 'C2', 3 ],
       [ '1E', 'C3', 3 ],
       [ '2F', 'C3', 3 ],
       [ '1G', 'C4', 3 ],
       [ '2H', 'C4', 3 ],
	   
       [ 'C1', 'S1', 3 ],
       [ 'C2', 'S1', 3 ],
       [ 'C3', 'S2', 3 ],
       [ 'C4', 'S2', 3 ],
	   
       [ '1B', 'C5', 3 ],
       [ '2A', 'C5', 3 ],
       [ '1D', 'C6', 3 ],
       [ '2C', 'C6', 3 ],
       [ '1F', 'C7', 3 ],
       [ '2E', 'C7', 3 ],
       [ '1H', 'C8', 3 ],
       [ '2G', 'C8', 3 ],
       [ 'C5', 'S3', 3 ],
       [ 'C6', 'S3', 3 ],
       [ 'C7', 'S4', 3 ],
       [ 'C8', 'S4', 3 ],

       [ 'S1', 'F1', 3 ],
       [ 'S2', 'F1', 3 ],
       [ 'S3', 'F2', 3 ],
       [ 'S4', 'F2', 3 ],
	   
       [ 'F1', 'CA1', 3 ],
       [ 'F2', 'CA1', 3 ],
    ]);
    
    // Set chart options
    var options = {
      width: 600,
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
    chart.draw(data, options);
   }
</script>
</body>
</html>
